<template>
	<view class="anmed">
		<view class="my-top">
			<image class="header" src="https://xcx.xiaombt.com/img/img/header.png" mode=""
				:style="{ height: navbarHeight + 'px' }">
			</image>
			<view class="nav">
				<u-navbar bgColor="transparent" leftIconColor='#6C5D47' titleStyle='color:#6C5D47' placeholder>
					<view class="u-nav-slot" slot="left"></view>
				</u-navbar>
			</view>
		</view>
		<view class="main" :style="{ marginTop: viewHeight + 'px' }">
			<view class="top">
				<view class="a">
					<view class="border"></view>
					<image
						src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
						mode=""></image>
				</view>
				<view class="b">
					<view class="text" @click="login">
						{{userInfo? userInfo.name : '登录'}}
					</view>
					<view class="text1" v-if="userInfo">
						单位：长春市小马奔腾科技有限公司
					</view>
				</view>
				<view class="c" @click="jumpTo('myDetail')">
					<image src="https://xcx.xiaombt.com/img/img/设置.png" mode=""></image>
				</view>
			</view>
			<view class="item" @click="jumpTo('chuan')">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/shangchuan.png" mode=""></image>
				<view class="text">
					上传
				</view>
				<image class="right" src="https://xcx.xiaombt.com/img/img/left.png" mode=""></image>
			</view>
			<!-- 	<view class="item">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/shenhe.png" mode=""></image>
				<view class="text">
					审核
				</view>
				<image class="right" src="https://xcx.xiaombt.com/img/img/left.png" mode=""></image>
			</view>
			<view class="item">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/lishi.png" mode=""></image>
				<view class="text">
					历史
				</view>
				<image class="right" src="https://xcx.xiaombt.com/img/img/left.png" mode=""></image>
			</view> -->
			<view class="item" @click="jumpTo('chuan')">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/shoucang.png" mode=""></image>
				<view class="text">
					收藏
				</view>
				<image class="right" src="https://xcx.xiaombt.com/img/img/left.png" mode=""></image>
			</view>
			<view class="item" @click="jumpTo('lianxi')">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/lianxi.png" mode=""></image>
				<view class="text">
					联系我们
				</view>
				<image class="right" src="https://xcx.xiaombt.com/img/img/left.png" mode=""></image>
			</view>
			<view class="item" style="margin-top: 20rpx;" @click="jumpTo('fankui')">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/fankui.png" mode=""></image>
				<view class="text">
					反馈意见
				</view>
				<image class="right" src="https://xcx.xiaombt.com/img/img/left.png" mode=""></image>
			</view>
			<view class="item">
				<image class="icon" src="https://xcx.xiaombt.com/img/img/banben.png" mode=""></image>
				<view class="text">
					版本更新
				</view>
				<view class="text1">
					V1.0.0
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		login
	} from '@/api/index.js'
	export default {
		data() {
			return {
				viewHeight: null,
				navbarHeight: null,
				userInfo: null

			};
		},
		methods: {
			jumpTo(type) {
				// if(!uni.getStorageSync('openid') || !uni.getStorageSync('token')) {
				//   uni.showToast({
				//     title: '请先登录',
				//     icon: 'none'
				//   });
				//   return
				// }
				if (type == 'myDetail') {
					uni.navigateTo({
						url: '/page/myDetail/index'
					});
				} else if (type == 'chuan') {
					uni.navigateTo({
						url: '/pages/chuan/index'
					});
				} else if (type == 'lianxi') {
					uni.makePhoneCall({
						phoneNumber: '0431-10086', // 电话号码
						success: function() {
							console.log('拨号成功');
						},
						fail: function(err) {
							console.log('拨号失败：', err);
						}
					});
				}else if (type == 'fankui') {
					uni.navigateTo({
						url: '/page/myForm/index'
					});
				}

			},
			login() {

				if (!uni.getStorageSync('openid') || !uni.getStorageSync('token')) {

					wx.login({
						success(res) {
							if (res.code) {
								//发起网络请求
								console.log(res.code)
								uni.showLoading({
									mask: true
								});
								login({
									code: res.code
								}).then(res => {
									uni.hideLoading();
								})
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			topbarClick(item) {
				this.topbarN = item.id
			}
		},
		async onLoad() {
			let phoneHeight = 0

			uni.getSystemInfo({
				success: function(info) {
					phoneHeight = info.windowHeight
				}
			});
			const query = uni.createSelectorQuery().in(this);
			query.select('.nav').boundingClientRect(data => {
				if (data) {
					this.navbarHeight = data.height;
				}
			}).exec();
			query.select('.my-top').boundingClientRect(data => {
				if (data) {
					this.viewHeight = data.height;
				}
			}).exec();
			query.select('.top-nav').boundingClientRect(data => {
				if (data) {
					this.toptabHeight = data.height;
					this.bottomHeight = phoneHeight - this.navbarHeight - this.toptabHeight

					console.log(phoneHeight, this.navbarHeight)
				}
			}).exec();





		}
	};
</script>


<style lang="scss" scoped>
	/deep/::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	.anmed {
		width: 100%;
		min-height: 100vh;
		background: #F2EFE9;
	}

	.main {
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 180rpx;
			padding: 0 44rpx;
			box-sizing: border-box;

			// .a,.b,.c{
			// 	height: 100%;
			// }
			.a {
				width: 120rpx;
				height: 120rpx;
				border-radius: 120rpx;
				box-shadow: 0px 2px 4px 0px rgba(115, 94, 73, 0.2);
				border: 5rpx solid rgb(154, 138, 115);
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 120rpx;
				}

				.border {
					width: 85%;
					height: 85%;
					border: 3rpx solid #9a8a73;
					border-radius: 120rpx;
					position: absolute;
					left: 5.5%;
					top: 5.5%;

				}
			}

			.b {
				width: 400rpx;

				.text {
					color: rgb(108, 93, 71);
					font-family: 思源黑体;
					font-size: 32rpx;
					font-weight: 500;

				}

				.text1 {
					color: rgb(108, 93, 71);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: 400;
					margin-top: 11rpx;
				}
			}

			.c {
				image {
					width: 40rpx;
					height: 40rpx;
				}


			}
		}
	}

	.item {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 48rpx;
		box-sizing: border-box;
		height: 96rpx;
		border-bottom: 4rpx solid #F2EFE9;

		.icon,
		.right {
			width: 48rpx;
			height: 48rpx;
		}

		.text {
			color: rgb(108, 93, 71);
			font-family: 思源黑体;
			font-size: 32rpx;
			font-weight: 400;
			text-align: left;
			width: 447rpx;
		}

		.text1 {
			color: rgb(108, 93, 71);
			font-family: 思源黑体;
			font-size: 28rpx;
			font-weight: 400;

		}
	}





	.my-top {
		width: 100%;
		background-color: #F2EFE9;
		position: fixed;
		z-index: 10000;
		top: 0;
		left: 0;

		.header {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.select {
			padding: 20rpx 38rpx;
			background-color: #fff;

			.center {
				width: 100%;
				height: 76rpx;
				position: relative;
				display: flex;
				align-items: center;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}

	}
</style>